import { PageHeaderWrapper } from '@ant-design/pro-layout';

import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal } from 'antd';
import React, { useRef, useState } from 'react';
import { history } from 'umi';

import {
  addCustomer,
  delCustomer,
  GetCustomerByPage,
  updateCustomer,
} from '@/services/system/customer';

const Customer: React.FC<{}> = () => {
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [showRole, SetShowRole] = useState(false); //显示角色
  const [formTitle, setFormTitle] = useState('新建客户'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [rowData, setRowData] = useState({ id: '' }); // 保存行值
  const actionRef = useRef<ActionType>();
  const [form] = Form.useForm();

  /**
   * 穿梭框的数据设置
   */
  const [rolesData, SetRolesData] = useState<object[]>([{ key: '', title: '' }]);
  const [initRoles, setInitRoles] = useState<string[]>([]);
  const [targetKeys, setTargetKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    {
      title: '客户编号', //表头显示的名称

      dataIndex: 'code', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      // render: (text, record, _, action) => (
      //   <a
      //     key="editKey"
      //     onClick={() => {
      //       // console.log(record, '----测试----');
      //       // 编辑用户
      //       history.push({
      //         pathname: `/system/customerUser`,
      //         query: {
      //           id: record.id,
      //         },
      //       });
      //     }}
      //   >
      //     {text}
      //   </a>
      // ),
    },
    {
      title: '客户名', //表头显示的名称
      dataIndex: 'name', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
      render: (text, record, _, action) => (
        <a
          key="editKey"
          onClick={() => {
            // console.log(record, '----测试----');
            // 编辑用户
            history.push({
              pathname: `/system/customerUser`,
              query: {
                id: record.id,
              },
            });
          }}
        >
          {text}
        </a>
      ),
    },

    // {
    //   title: '客户名称', //表头显示的名称
    //   search: false,
    //   dataIndex: 'name', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    // },
    {
      title: '国家', //表头显示的名称
      search: false,
      dataIndex: 'country', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },
    {
      title: '省', //表头显示的名称
      search: false,
      dataIndex: 'province', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },

    {
      title: '市', //表头显示的名称
      search: false,
      dataIndex: 'city',
    },
    {
      title: '公司地址', //表头显示的名称
      search: false,
      dataIndex: 'companyAddress',
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            // console.log(record, '----测试----');
            // 编辑用户
            setModalVisit(true);
            setCreateOrUpdate(true);
            setFormTitle('编辑用户');
            form.setFieldsValue({ ...record });
          }}
        >
          编辑
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除客户',
              content: '确定删除客户吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delCustomer({ id: record.id });
                actionRef.current.reload();
              },
            });
            // actionRef.current.reload();
          }}
        >
          删除
        </a>,

        // <a
        //   key="linkRole"
        //   onClick={async () => {
        //     setRowData(record);
        //     const result = await loadTransferUserRelRoler({ id: record.id });
        //     SetRolesData(result?.data.data);
        //     setTargetKeys(result?.data.value);

        //     actionRef.current.reload();
        //     SetShowRole(true);
        //     // actionRef.current.reload();
        //   }}
        // >
        //   绑定用户
        // </a>,
      ],
    },
  ];

  const handleSubmit = async () => {
    if (formTitle == '新建客户') {
      await addCustomer(form.getFieldsValue());
    } else {
      await updateCustomer(form.getFieldsValue());
    }

    message.success('添加成功');
    setModalVisit(false);
    // 这个爆红不用管(从新加载页面)
    actionRef.current.reload();
  };
  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable //表格Pro组件
        headerTitle="客户查询" //表头
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        revalidateOnFocus={false}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              // console.log(selectedRows, '---选取多行----');
              // 1.清空form
              setCreateOrUpdate(false);
              setFormTitle('新建客户');
              form.resetFields();
              //
              setModalVisit(true);
            }}
            type="primary"
          >
            新建客户
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          console.log(params, sort, filter);
          const result = await GetCustomerByPage(params);
          console.log(result);
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
          // return  await new Promise({data:[{loginName:}], total:10, success: 0})
          // return {data:[], total:10, success: 0}
        }} //请求数据的地方，例子是用mock模拟数据，我是在后台请求的数据
        columns={columns} //上面定义的
        rowSelection={{}}
      />

      <Modal
        title={formTitle}
        visible={modalVisit}
        onOk={handleSubmit}
        onCancel={() => setModalVisit(false)}
      >
        <Form
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="left"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item label="id" name="id" hidden={true}>
            <Input />
          </Form.Item>
          <Form.Item
            label="编号"
            name="code"
            rules={[{ required: true, message: 'Please input your code!' }]}
          >
            <Input disabled={createOrUpdate} />
          </Form.Item>

          <Form.Item
            label="名称"
            name="name"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="国家"
            name="country"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="省"
            name="province"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="市"
            name="city"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="公司地址"
            name="companyAddress"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </PageHeaderWrapper>
  );
};

export default Customer;
